import 'package:flutter/material.dart';
import '../models/learning_progress.dart';
import 'package:intl/intl.dart';

class LearningProgressWidget extends StatelessWidget {
  final LearningProgress progress;
  final VoidCallback onViewHistory;

  const LearningProgressWidget({
    Key? key,
    required this.progress,
    required this.onViewHistory,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final int remainingWords = progress.totalWords - progress.learnedWords;
    final double progressPercent = progress.totalWords > 0
        ? progress.learnedWords / progress.totalWords
        : 0.0;

    return Container(
      padding: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          const Text(
            '学习进度',
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 16.0),
          // 进度条
          LinearProgressIndicator(
            value: progressPercent,
            backgroundColor: Colors.grey[200],
            valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
            minHeight: 10,
            borderRadius: BorderRadius.circular(5),
          ),
          const SizedBox(height: 16.0),
          // 进度数据
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildProgressItem(
                '词书总词数',
                '${progress.totalWords}',
                Icons.book,
                Colors.blue,
              ),
              _buildProgressItem(
                '未背单词',
                '$remainingWords',
                Icons.pending_actions,
                Colors.orange,
              ),
              _buildProgressItem(
                '累计已背',
                '${progress.learnedWords}',
                Icons.check_circle,
                Colors.green,
              ),
              _buildProgressItem(
                '今日已背',
                '${progress.todayLearned}',
                Icons.today,
                Colors.purple,
              ),
            ],
          ),
          const SizedBox(height: 16.0),
          // 历史记录按钮
          Center(
            child: TextButton.icon(
              onPressed: onViewHistory,
              icon: const Icon(Icons.history),
              label: const Text('历史记录'),
              style: TextButton.styleFrom(
                foregroundColor: Colors.blue,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildProgressItem(
      String label, String value, IconData icon, Color color) {
    return Column(
      children: [
        Icon(icon, color: color, size: 24),
        const SizedBox(height: 4.0),
        Text(
          value,
          style: const TextStyle(
            fontSize: 16.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 4.0),
        Text(
          label,
          style: TextStyle(
            fontSize: 12.0,
            color: Colors.grey[600],
          ),
        ),
      ],
    );
  }
}

class HistoryRecordsDrawer extends StatelessWidget {
  final LearningProgress progress;

  const HistoryRecordsDrawer({
    Key? key,
    required this.progress,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final sortedEntries = progress.dailyRecords.entries.toList()
      ..sort((a, b) => b.key.compareTo(a.key)); // 按日期降序排序

    return Container(
      height: MediaQuery.of(context).size.height * 0.6,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, -5),
          ),
        ],
      ),
      child: Column(
        children: [
          // 抽屉标题栏
          Container(
            padding: const EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              color: Colors.blue[50],
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text(
                  '学习历史记录',
                  style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.close),
                  onPressed: () => Navigator.pop(context),
                ),
              ],
            ),
          ),
          // 历史记录列表
          Expanded(
            child: sortedEntries.isEmpty
                ? const Center(
                    child: Text(
                      '暂无学习记录',
                      style: TextStyle(color: Colors.grey),
                    ),
                  )
                : ListView.builder(
                    itemCount: sortedEntries.length,
                    itemBuilder: (context, index) {
                      final entry = sortedEntries[index];
                      final date = entry.key;
                      final count = entry.value;
                      
                      // 格式化日期
                      final dateObj = DateTime.parse(date);
                      final formattedDate = DateFormat('yyyy年MM月dd日').format(dateObj);
                      
                      return ListTile(
                        leading: const Icon(Icons.calendar_today),
                        title: Text(formattedDate),
                        trailing: Text(
                          '$count 个单词',
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.blue,
                          ),
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
} 